<div draggable mat-dialog-title>
  <h6>{{person.personName}} - {{"histTitle" | translate}}</h6>

  <mat-form-field style="width: 200px;margin-right: 20px;font-size: 1rem;">
    <input matInput [matDatepicker]="fromtime" (dateChange)="refresh()" [formControl]="fromTimeCtrl" placeholder="{{'fromTime' | translate}}">
    <mat-datepicker-toggle matSuffix [for]="fromtime"></mat-datepicker-toggle>
    <mat-datepicker #fromtime></mat-datepicker>
  </mat-form-field>

  <mat-form-field style="width: 200px;margin-right: 20px;font-size: 1rem;">
    <input matInput [matDatepicker]="totime"  (dateChange)="refresh()" [formControl]="toTimeCtrl" placeholder="{{'toTime' | translate}}">
    <mat-datepicker-toggle matSuffix [for]="totime"></mat-datepicker-toggle>
    <mat-datepicker #totime></mat-datepicker>
  </mat-form-field>
</div>

<div mat-dialog-content [style.height]="contentHeight">
  <mat-grid-list cols="1" rowHeight="200px" gutterSize="10">
    <mat-grid-tile colspan="1">
      <div echarts [options]="moveChartOptions" style="height: 200px;width: 100%;" (chartInit)="onMoveChartInit($event)"></div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
      <div echarts [options]="turnOverAlarmChartOptions" style="height: 200px;width: 100%;" (chartInit)="onTurnOverAlarmChartInit($event)"></div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
      <div echarts [options]="awayAlarmChartOptions" style="height: 200px;width: 100%;" (chartInit)="onAwayAlarmChartInit($event)"></div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
      <div echarts [options]="upAlarmChartOptions" style="height: 200px;width: 100%;" (chartInit)="onUpAlarmChartInit($event)"></div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
      <div echarts [options]="sideAlarmChartOptions" style="height: 200px;width: 100%;" (chartInit)="onSideAlarmChartInit($event)"></div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
      <div echarts [options]="breatheAlarmChartOptions" style="height: 200px;width: 100%;" (chartInit)="onBreatheAlarmChartInit($event)"></div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
      <div echarts [options]="heartAlarmChartOptions" style="height: 200px;width: 100%;" (chartInit)="onHeartAlarmChartInit($event)"></div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
      <div echarts [options]="wetAlarmChartOptions" style="height: 200px;width: 100%;" (chartInit)="onWetAlarmChartInit($event)"></div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
      <div echarts [options]="hchartOptions" style="height: 200px;width: 100%;" (chartInit)="onhChartInit($event)"></div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
      <div echarts [options]="bchartOptions" style="height: 200px;width: 100%;" (chartInit)="onbChartInit($event)"></div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
      <div echarts [options]="sleepChartOptions" style="height: 200px;width: 100%;" (chartInit)="onSleepChartInit($event)"></div>
    </mat-grid-tile>
  </mat-grid-list>
</div>

<div mat-dialog-actions>
  <div *ngIf="error" class="wdl-error">{{error | translate}}</div>
  <button mat-button (click)="dialogRef.close('Close')">{{"close" | translate}}</button>
</div>